<template>
  <div class="nav" >
    <div class="inner" :class="{checked:item.url==currentUrl }" @click="checkInner(item.url!)" v-for="item in navlist" :key="item.id">
        <i class="iconfont" :class="item.ico" ></i>
        <lable>{{ item.name.substring(0,2) }}</lable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,watch } from "vue"
import { useRouter,useRoute } from "vue-router";
import { navdata } from "../service/meau/type";
import  { useStore } from '../store/index'
import { storeToRefs } from "pinia"
const usestore = useStore()
const {menus} = storeToRefs(usestore)

//列表展示

// let meaulist = JSON.parse(sessionStorage.getItem("menu")!) as navdata[];
let navlist = ref<navdata[]>([])
navlist.value = menus.value.filter((item:any)=>item.pid===0&&item.postion=="left");

//路由切换
let currentUrl = ref("")
let router = useRouter()
let route = useRoute()
const checkInner = (url:string)=>{
  router.push(url)
}
//监听路由变换
watch(()=>route.path,()=>{
  currentUrl.value = route.path
},{immediate:true})

</script>

<style lang="less" scoped>
@import url(../assets/home/homeAside.less);
</style>
